<template>
  <view style="width: 750rpx;height: 750rpx;">
    <!-- 使用条件渲染，当article存在时渲染文章详情信息，否则显示骨架屏 -->
    <template v-if="article && Object.keys(article).length !== 0">
      <view class="detail-title">{{ article.title }}</view>
      <view class="detail-info">{{ article.user_name }} {{ article.last_modify_date }}</view>
      <image class="detail-avatar" :src="article.avatar" mode="aspectFill" style="width: 500rpx; height: 500rpx;"></image>
      <view class="detail-content">{{ article.content }}</view>
    </template>
    <template v-else>
      <view><el-skeleton /></view>
    </template>
  </view>
</template>

<script>
export default {
  data() {
    return {
      article: {} // 存储文章详情数据
    };
  },
  onLoad(query) {
    // 从路由参数中获取文章ID
    const articleId = query.id;
    // 根据文章ID获取文章详情数据，这里你需要根据具体情况调用相应的接口
    // 假设调用的接口是getArticleDetail，返回的数据包含title、user_name、last_modify_date、avatar和content等字段
    this.getArticleDetail(articleId);
  },
  methods: {
    async getArticleDetail(articleId) {
      // 调用接口获取文章详情数据
      let res = await uniCloud.callFunction({
        name: "getArticleDetail",
        data: {
          id: articleId
        }
      });
      // 将返回的文章详情数据赋值给article变量
      this.article = res.result.data[0]; // 注意：返回的数据是一个数组，需要取第一个元素
    }
  }
};
</script>

<style>
/* 样式请根据实际需要自行修改 */
.detail-title {
  font-size: 20px;
  font-weight: bold;
  margin: 20px 0;
}
.detail-info {
  color: #999;
  margin-bottom: 20px;
}
.detail-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 20px;
}
.detail-content {
  line-height: 1.6;
}
</style>
